<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left">
					<button plain class="back-btn" @click="goBack">返回</button>
				</view>
				<view slot="center" class="u-nav-slot-center">
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">中考抢分王</span>
						<image src="@/static/images/tongbu/xuanze.png" style="width: 30rpx;height: 30rpx;" />
					</button>
				</view>
			</u-navbar>
		</view>
		<view class="header-tab">
			<view class="review-content-left-item" v-for="item in tabs" :key="item.value"
				:class="current== item.value ?'active':''" @click="tabChange(item.value)">
				{{item.name}}
			</view>
		</view>

		<view class="content">

			<view class="content-son">
				<block v-if="current === 0">
					<view class="content-son-item content-son-item1">
						<image src="@/static/images/review/danci.png"></image>
					</view>
					<view class="line-center"></view>
					<view class="content-son-item content-son-item2">
						<image src="@/static/images/review/yufa.png"></image>
					</view>
				</block>
				<block v-if="current === 1">

					<view class="book-list">
						<view class="flex-align-center">
							<view class="book-list-item">
								<view class="book-list-item-name">
									听力理解
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									人机对话
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									阅读理解
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									连词成句
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									完成句子
								</view>
							</view>
						</view>
						<view class="flex-align-center">
							<view class="book-list-item">
								<view class="book-list-item-name">
									完型填空
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									选词填空
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									短文填空
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name1">
									任务型阅读
								</view>
							</view>
							<image class="book-list-item-arrow" src="@/static/images/review/youjian-lan.png"></image>
							<view class="book-list-item">
								<view class="book-list-item-name">
									书面表达
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="current === 2">
					<view class="content-son-item-exam flex-align-center">
						<image src="@/static/images/review/moni.png" class="moni"></image>
						<view class="">
							<image src="@/static/images/review/renjiduihua.png" class="image"></image>
							<view class="title">人机对话模拟考试</view>
						</view>
						<view class="">
							<image src="@/static/images/review/zhongkaomoni.png" class="image"></image>
							<view class="title">中考模拟考试</view>
						</view>

					</view>
					<view class="content-son-item-exam flex-align-center" style="margin-left: 94rpx;">
						<image src="@/static/images/review/zhenti.png" class="moni"></image>
						<view class="">
							<image src="@/static/images/review/renjiduihua.png" class="image"></image>
							<view class="title">人机对话真题考试</view>
						</view>
						<view class="">
							<image src="@/static/images/review/zhongkaomoni.png" class="image"></image>
							<view class="title">中考真题考试</view>
						</view>
					</view>
				</block>
			</view>


		</view>
		<view class="index-right-footer flex-between">
			<span>今日学习效率：0%(00:00/00:00)</span>
			<span>今日词汇记忆 时长:00:00 数量:0个 速度:0个/小时</span>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				tabs: [{
					value: 0,
					name: '突破基础'
				}, {
					value: 1,
					name: '突破专项'
				}, {
					value: 2,
					name: '突破考试'
				}],

			};
		},
		methods: {
			goBack() {
				this.$common.goBack()
			},
			tabChange(val) {
				console.log(val);
				this.current = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: radial-gradient(97.5% 97.5% at 50% 50.583333333333336%, rgba(34, 45, 245, 1) 0%, rgba(110, 117, 245, 1) 100%);
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #DBD9D9;
		font-size: px_2_vw(48);

		button {
			margin-right: 27rpx;
			height: px_2_vw(40) !important;
			padding: 0 12rpx !important;
		}

	}

	.u-nav-slot-right {}

	.header-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx auto;
		width: 45%;
		margin-bottom: 20rpx;

		.review-content-left-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: px_2_vw(232);
			height: px_2_vw(64);
			text-align: center;
			color: #fff;
			font-size: px_2_vw(36);
			font-weight: 400;
			border-right: 0;
			background-image: url('../../../../static/images/review/bj-tupozhuanxiang.png');
			background-size: 100% 100%;

		}
	}

	.active {
		color: #FA3E14 !important;
		background-image: url('../../../../static/images/review/bj-tupojichu.png') !important;
		background-size: 100% 100%;
	}

	.content {
		margin: 0 auto;
		width: 90%;
		padding: 20rpx;
		height: px_2_vw(760);
		background: rgba(113, 120, 248, 1);
		border-radius: 30rpx;

		.content-son {
			height: 100%;
			width: 100%;
			background: rgba(217, 215, 215, 1);
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 40rpx 80rpx;

			.line-center {
				height: px_2_vw(271);
				// width: 1rpx;
				border-left: 1rpx solid #828282;
				margin: 0 85rpx;

			}

			.content-son-item {
				height: px_2_vw(520);
				width: px_2_vw(462);
				background: #E5E5E5;
				border-radius: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					height: px_2_vw(254);
					width: px_2_vw(254);
				}

			}

			.content-son-item1 {
				background: rgba(242, 200, 157, 1);
			}

			.content-son-item2 {
				background: rgba(197, 194, 204, 1);
			}

			// 突破专项
			.book-list {
				height: px_2_vw(435);
				width: px_2_vw(1048);
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.book-list-item {
					width: px_2_vw(144);
					height: px_2_vw(148);
					background-image: url('@/static/images/review/book.png');
					background-size: 100% 100%;
					font-size: px_2_vw(20);
					color: #fff;
					position: relative;

					.book-list-item-name {
						position: absolute;
						right: 20rpx;
						bottom: 30rpx;
					}
					.book-list-item-name1{
						width: px_2_vw(68);
						position: absolute;
						right: 20rpx;
						bottom: 30rpx;
					}
				}

				.book-list-item-arrow {
					width: px_2_vw(86);
					height: px_2_vw(79);
				}

			}

			// 突破考试
			.content-son-item-exam {
				height: px_2_vw(330);
				width: px_2_vw(583);
				border-radius: 35rpx;
				border: 1rpx dashed #A1A1A1;
				justify-content: space-around;
				font-size: px_2_vw(22);
				text-align: center;
				font-weight: bolder;
				position: relative;

				.image {
					height: px_2_vw(167);
					width: px_2_vw(167);
				}

				.title {
					margin-top: 30rpx;
				}

				.moni {
					position: absolute;
					top: 0;
					left: 42rpx;
					height: px_2_vw(47);
					width: px_2_vw(46);
				}
			}
		}
	}

	// 底部
	.index-right-footer {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		bottom: 37rpx;
		width: 80%;
		left: 10%;
	}
</style>